<template>
<!--
头像 用户名 性别 简介
-->
  <div class="main">
<!--    头像-->
    <div class="profilePhoto items">
      <div class="tips">更换头像</div>
      <div class="inform">
        <div class="photo">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :http-request="imgUpload" 
            >
            <img v-if="avatar" :src="avatar" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </div>
      <div class="img"><img src="~assets/img/profile/user/greyjiantou.png"></div>
    </div>
    <div class="line"></div>
<!--    用户名-->
   
    <div class="profileName items">
      <div class="tips">用户名</div>
      <div class="inform">
        <div class="user_name">
          <el-input v-model="nickname"></el-input>
        </div>
      </div>
      <div class="img"><img src="~assets/img/profile/user/greyjiantou.png"></div>
    </div>
    <div class="line"></div>
<!--    性别-->
    <div class="profileSex items">
      <div class="tips">性别:</div>
      <div class="inform">
        <div class="sex">
          <el-input v-model="sex"></el-input>
        </div>
      </div>
      <div class="img"><img src="~assets/img/profile/user/greyjiantou.png"></div>
    </div>
    <div class="line"></div>
<!--    简介-->
    <div class="profileIntro items">
      <div class="tips">简介</div>
      <div class="inform">
        <div class="introduction">
          <el-input type="textarea" v-model="introduction"></el-input>
        </div>
      </div>
      <div class="img"><img src="~assets/img/profile/user/greyjiantou.png"></div>
    </div>
    <br>
    <el-button type="primary" style="float: right;" @click="editUserInfo">确认修改</el-button>
    <div class="line"></div>

    <div class="modify_view" v-show="$route.path !== '/editInform'"><router-view></router-view></div>
  </div>

</template>

<script>
  import { changeHeadImg, editUser } from "@/network/profile";

  export default {
    name: "",
    data(){
      return{
        userId: '',
        avatar:'',
        introduction: '',
        sex:'',
        nickname:'',
        image:'',
        profilePhoto: require('assets/img/profile/user/touxiang.png'),
      }
    },
    computed:{
      checkIntroduction: {
        get:function () {
          return this.user.brefIntroduction == null ? '(- -)/ 哟' : this.user.brefIntroduction
        },
      }
    },
    methods:{
      async editUserInfo(){
        await editUser({
          "brefIntroduction": this.introduction,
          "nickName": this.nickname,
          "sex":this.sex,
          "userId": this.userId,
          "userImage": this.avatar,
        })
        this.$router().back()
      },
      async imgUpload(params){
        const {data:{data:res}} = await changeHeadImg(params.file)
        this.avatar = res
      }
    },
    mounted(){
      let user = JSON.parse(localStorage.getItem('user'));
      this.userId = user.id
      this.profilePhoto = user.avatar;
      this.introduction = user.brefIntroduction;
      this.sex = user.sex;
      this.nickname = user.nickName;
      this.avatar = user.avatar;
    }
  }
</script>

<style scoped>
  .main{
    padding-top: 54px;
    width: 95%;
    height: 100vh;
    margin: 0 auto;
  }
  .items{
    width: 100%;
  }
  .items{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .tips{
    font-size: 16px;
  }
  .inform{
    width: 70%;
    display: flex;
    justify-content: flex-end;
  }
  .inform>.photo{
    width: 65px;
    height: 65px;
    overflow: hidden;
    border-radius: 50%;
    background-color: #f6f6f6;
  }
  .photo img{
    width: 100%;
  }
  .img{
    display: flex;
    width: 6%;
    height: 38px;
    justify-content: flex-end;
    align-items: center;
  }
  .img img{
    width: 100%;
  }
  .line{
    width: 100%;
    margin: 10px auto;
    border-bottom: 1px solid #e7e4e4;
    border-radius: 50%;
  }
  .modify_view{
    position: absolute;
    top: 44px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f6f187;
  }
</style>
